<template>
  
    <section class="loginContainer">
      <div class="loginInner">
        <div class="login_header">
          <h2 class="login_logo">硅谷外卖</h2>
          <div class="login_header_title">
            <a href="javascript:;" :class="{on:loginWay===1}" @click="loginWay=1">短信登录</a>
            <a href="javascript:;" :class="{on:loginWay===2}" @click="loginWay=2">密码登录</a>
          </div>
        </div>
        <div class="login_content">
          <form @submit.prevent="">
            <div :class="{off:!(loginWay===1)}" >
              <section class="login_message">
                <input type="tel" maxlength="11" placeholder="手机号" v-model="phone" @keyup="checkPhone">
                <button  class="get_verification" :disabled="getdisabled" @click="getVerification" ref="buttonEl">获取验证码</button>
              </section>
              <section class="login_verification">
                <input type="tel" maxlength="8" placeholder="验证码" v-model="code">
              </section>
              <section class="login_hint">
                温馨提示：未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意
                <a href="javascript:;">《用户服务协议》</a>
              </section>
            </div>
            <div :class="{off:!(loginWay===2)}" >
              <section>
                <section class="login_message">
                  <input type="tel" maxlength="11" placeholder="手机/邮箱/用户名" v-model="name">
                </section>
                <section class="login_verification">
                  <input type="password" maxlength="8" placeholder="密码" :class="{off:changmove===true}" v-model="pwd">
                  <input type="text" maxlength="8" placeholder="密码" :class="{off:changmove===false}" v-model="pwd">
                  <div class="switch_button" @click="changeSwitch" :class="{switch_button_bgc:changmove}">
                    <div class="switch_circle" :class="{switch_circle_move:changmove}"></div>
                    <!-- <span class="switch_text">...</span> -->
                  </div>
                </section>
                <section class="login_message">
                  <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
                  <img class="get_verification" src="./images/captcha.svg" alt="captcha" @click="changeCaptcha" ref="imgs">
                </section>
              </section>
            </div>
            <button class="login_submit" @click="loginEvent">登录</button>
          </form>
          <a href="javascript:;" class="about_us">关于我们</a>
        </div>
        <a href="javascript:" class="go_back" @click="$router.go(-1)" >
          <i class="iconfont icon-jiantou2"></i>
        </a>
      </div>
    </section>
  
</template>

<script>
import { MessageBox } from 'mint-ui';
export default {
   name:"login",
   data(){
    return{
      // 登录切换
      loginWay:1,
      //手机号码值
      phone:"",
      // 获取验证码的按钮的禁用
      getdisabled:true,
      // 手机号的正则表达式
      phoneRegex:/^(?:(?:\+|00)86\s*)?1[3-9]\d{9}$/,
      // 手机号的验证码的正则表达式
      phoneCodeRegex: /^\d{4}$/,
      // 小球改变移动轨迹的定义
      changmove:false,
      // 密码的定义
      pwd:"",
      // 名字的定义
      name:"",
      // 图片二维码的定义
      captcha:"",
      // 手机验证码
      code:""

    }
   },
   methods:{
    checkPhone(){
        const phone =this.phone.trim();
        // 手机号合法则变为false
        this.getdisabled=!(this.phoneRegex.test(phone))
    },
    // 验证码按钮倒计时效果
    getVerification(){
  // 每次点击都清除前面的定时器
   if(this.time){
    return
   }
      //设置时间参数
      let n=30;
  this.time=setInterval(() => {
      
      this.$refs.buttonEl.innerHTML=`已发送(${n}s)`
       n--
       if(n<0){
           clearInterval(this.time);
           this.time=false;
           this.$refs.buttonEl.innerHTML=`获取验证码`
       }
       
      }, 1000);
  // 发送手机验证码的请求
     this.$store.dispatch("changephonecode",this.phone.trim());
    },
    // 改变切换的状态
    changeSwitch(){
      this.changmove=!this.changmove
    },
    // 点击改变图片验证码
    changeCaptcha(){
      
      this.$refs.imgs.src="http://localhost:4000/captcha"+"?"+Date.now();
    },
    //登录事件
    loginEvent(){
      if(this.loginWay===1){
        const phone =this.phone.trim();
        const code = this.code.trim();
        if(phone){
          // 手机号码格式化验证
          const checkPhoneFlag = this.phoneRegex.test(phone);
            if(checkPhoneFlag){
            }else{
              MessageBox.alert('手机号不对');
              return
            }
        }else{
          MessageBox.alert('手机号不对');
          return
        }
        // 验证手机验证码的事项
        if(code){
          //  手机验证码格式化验证
          const checkPhoneCode=this.phoneCodeRegex.test(code);
          if(checkPhoneCode){

          }else{
            MessageBox.alert('手机验证码不对');
            return
          }
        }else{
          MessageBox.alert('手机验证码不对');
          return
        }
        // 手机号码验证码登录的请求
        this.$axios({
        method:"POST",
        url:"/login_sms",
        data:{
          phone,
          code
      }
      }).then(value=>{
             
        if(value.data.code===1){
          MessageBox.alert(value.data.msg);
        }else{
          this.$store.dispatch("changelogin",value.data.data);
          clearInterval(this.time)
          this.$router.replace("/my");

        }
      })

      }
      
      else{
        const name=this.name.trim();
        const pwd=this.pwd.trim();
        const captcha=this.captcha.trim();
        //姓名验证
        if(name){
        }else{
          MessageBox.alert('名字不对');
          return
        }
        if(pwd){

        }else{
          MessageBox.alert('密码不对');
          return
        }
        if(captcha){

        }else{
          MessageBox.alert('验证码不对').then(action=>{
            this.$refs.imgs.src="http://localhost:4000/captcha"+"?"+Date.now();
          });
          return
        }
      //用户密码登录发送的请求
      this.$axios({
        method:"POST",
        url:"/login_pwd",
        data:{
          name,
          pwd,
          captcha
      }
      }).then(value=>{
             
        if(value.data.code===1){
          MessageBox.alert(value.data.msg).then(action=>{
            this.$refs.imgs.src="http://localhost:4000/captcha"+"?"+Date.now();
          });
        }else{
          this.$store.dispatch("changelogin",value.data.data);
          this.$router.replace("/my");

        }
      }) 








      }
    },

   },
   mounted(){
    this.$refs.imgs.src="http://localhost:4000/captcha"+"?"+Date.now();
   }
}
</script>

<style scoped>
/* 自定义小球移动的距离 */
.switch_circle_move{
  transform: translateX(15px) !important;
}
/* 自定义按钮的背景颜色 */
.switch_button_bgc{
  background-color: #02a774!important;
}

 .loginContainer {
  width: 100%;
  height: 100%;
  background: #fff;
}
 .loginContainer .loginInner {
  padding-top: 60px;
  width: 80%;
  margin: 0 auto;
}
 .loginContainer .loginInner .login_header .login_logo {
  font-size: 40px;
  font-weight: bold;
  color: #02a774;
  text-align: center;
}
 .loginContainer .loginInner .login_header .login_header_title {
  padding-top: 40px;
  text-align: center;
}
 .loginContainer .loginInner .login_header .login_header_title >a {
  color: #333;
  font-size: 14px;
  padding-bottom: 4px;
}
 .loginContainer .loginInner .login_header .login_header_title >a:first-child {
  margin-right: 40px;
}
 .on{
  color: #02a774!important;
  font-weight: 700;
  border-bottom: 2px solid #02a774;
}
 .loginContainer .loginInner .login_content >form >div {
  display: none;
}
 .loginContainer .loginInner .login_content >form >div {
  display: block;
}
 .loginContainer .loginInner .login_content >form >div input {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: 0;
  font: 400 14px Arial;
}
 .loginContainer .loginInner .login_content >form >div input:focus {
  border: 1px solid #02a774;
}
 .loginContainer .loginInner .login_content >form >div .login_message {
  position: relative;
  margin-top: 16px;
  height: 48px;
  font-size: 14px;
  background: #fff;
}
 .loginContainer .loginInner .login_content >form >div .login_message .get_verification {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: 0;
  /* color: #ccc; */
  font-size: 14px;
  background: transparent;
}
 .loginContainer .loginInner .login_content >form >div .login_verification {
  position: relative;
  margin-top: 16px;
  height: 48px;
  font-size: 14px;
  background: #fff;
}
 .loginContainer .loginInner .login_content >form >div .login_verification .switch_button {
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: background-color 0.3s, border-color 0.3s;
  padding: 0 6px;
  width: 30px;
  height: 16px;
  line-height: 16px;
  color: #fff;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
 .loginContainer .loginInner .login_content >form >div .login_verification .switch_button.off {
  background: #fff;
}
 .loginContainer .loginInner .login_content >form >div .login_verification .switch_button.off .switch_text {
  float: right;
  color: #ddd;
}
 .loginContainer .loginInner .login_content >form >div .login_verification .switch_button {
  background: #fff;
}
 .loginContainer .loginInner .login_content >form >div .login_verification .switch_button >.switch_circle {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
  transition: transform 0.3s;
}
 .loginContainer .loginInner .login_content >form >div .login_hint {
  margin-top: 12px;
  color: #999;
  font-size: 14px;
  line-height: 20px;
}
 .loginContainer .loginInner .login_content >form >div .login_hint >a {
  color: #02a774;
}
 .loginContainer .loginInner .login_content >form .login_submit {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 30px;
  border-radius: 4px;
  background: #4cd96f;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 42px;
  border: 0;
}
 .loginContainer .loginInner .login_content .about_us {
  display: block;
  font-size: 12px;
  margin-top: 20px;
  text-align: center;
  color: #999;
}
 .loginContainer .loginInner .go_back {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
}
 .loginContainer .loginInner .go_back >.iconfont {
  font-size: 20px;
  color: #999;
}
/* 设置一个开关不显示 */
.off{
  display: none!important;
}
</style>